<script setup lang="ts">
import {TeamType} from "../models/team";
import {teamStatusEnum} from "../constants/team.ts";
import myAxios from "../plugins/myAxios.ts";
import {showFailToast, showSuccessToast} from "vant";
import {getCurrentUser} from "../service/user.ts";
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import cover from '../assets/cover.png';

interface TeamCardListProps {
  teamList: TeamType[];
}

withDefaults(defineProps<TeamCardListProps>(), {
  teamList: []
});

const router = useRouter();
const currentUser = ref();
const show = ref(false);
const joinTeamId = ref<number>();
const password = ref('');

const preJoinTeam = (team: TeamType) => {
  joinTeamId.value = team.id;
  if (team.status === 0) {
    doJoinTeam(team.id)
  } else {
    show.value = true;
  }
}

const doJoinTeam = async () => {
  if (!joinTeamId.value) {
    return;
  }
  const res = await myAxios.post('/team/join', {
    teamId: joinTeamId.value,
    password: password.value
  });
  if (res?.code === 200) {
    showSuccessToast('加入成功');
    doJoinCancel();
  } else {
    showFailToast('加入失败' + (res.description ? `, ${res.description}` : ''));
  }
}

const doJoinCancel = () => {
  joinTeamId.value = 0;
  password.value = '';
}

const doUpdateTeam = (id: number) => {
  router.push({
    path: '/team/update',
    query: {
      id: id,
    }
  })
}

/**
 * 退出队伍
 * @param id
 */
const doQuitTeam = async (id: number) => {
  const res = await myAxios.post('/team/quit', {
    teamId: id,
  });
  if (res?.code === 200) {
    showSuccessToast('退出成功')
  } else {
    showFailToast('退出失败' + (res.description ? `, ${res.description}` : ''))
  }
}

/**
 * 解散队伍
 * @param id
 */
const doDisbandTeam = async (id: number) => {
  const res = await myAxios.delete('/team/' + id);
  if (res?.code === 200) {
    showSuccessToast('解散成功')
  } else {
    showFailToast('解散失败' + (res.description ? `, ${res.description}` : ''))
  }
}
onMounted(async () => {
  currentUser.value = await getCurrentUser()
})
</script>

<template>

  <van-card
      v-for="team in teamList"
      :desc="team.description"
      :title="team.name"
      :thumb="cover"
  >
    <template #tags>
      <van-tag plain type="danger" style="margin-right: 8px; margin-top: 8px;">{{
          teamStatusEnum[team.status]
        }}
      </van-tag>
    </template>
    <template #bottom>
      <div>
        {{ '最大人数：' + team.hasJoinNum + '/' + team.maxNum }}
      </div>
      <div>
        {{ '截止时间：' + new Date(team.expireTime) }}
      </div>
      <div>
        {{ '创建时间：' + new Date(team.createTime) }}
      </div>
    </template>
    <template #footer>
      <!--<div>-->
      <!--  {{ '创建人：' + team.createUser.username}}-->
      <!--</div>-->
      <van-button v-if="team.userId !== currentUser?.id && !team.hasJoin" type="primary" size="mini" plain
                  @click="preJoinTeam(team)">加入队伍
      </van-button>
      <van-button v-if="team.userId === currentUser?.id" type="success" size="mini" plain
                  @click="doUpdateTeam(team.id)">更新队伍
      </van-button>
      <van-button v-if="team.hasJoin" type="warning" size="mini" plain @click="doQuitTeam(team.id)">退出队伍
      </van-button>
      <van-button v-if="team.userId === currentUser?.id" type="danger" size="mini" plain
                  @click="doDisbandTeam(team.id)">解散队伍
      </van-button>
    </template>
  </van-card>
  <van-dialog v-model:show="show" title="请输入密码" show-cancel-button @confirm="doJoinTeam" @cancel="doJoinCancel">
    <van-field v-model="password" label="密码" placeholder="请输入密码"/>
  </van-dialog>
</template>

<style scoped>

</style>
